<%@ include file="/WEB-INF/jsp/includes/include.jsp" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Edit Volunteer Profile</title>

		<c:set var="form"><spring:theme code="form"/></c:set>
		<c:if test="${not empty form}">
			<link rel="stylesheet" href="<c:url value="${form}"/>" type="text/css" />
		</c:if>
	</head>

	<body>
		<form:form method="post" id="userEditProfileForm" commandName="command">

			<div id="validationErrors">
				<form:errors path="*" cssClass="error"/>
			</div>
		
			<fieldset>
				<legend>User Information</legend>
				
				<div>
					<label for="user.firstName" id="firstNameLabel">First Name:</label>
					<form:input path="user.firstName" id="firstName" size="50" maxlength="100" cssClass="text" cssErrorClass="text_error"/>
					<form:errors path="user.firstName" id="firstNameErrors" cssClass="error"/>
				</div>
				<div>
					<label for="user.lastName" id="lastNameLabel">Last Name:</label>
					<form:input path="user.lastName" id="lastName" size="50" maxlength="100" cssClass="text" cssErrorClass="text_error"/>
					<form:errors path="user.lastName" id="lastNameErrors" cssClass="error"/>
				</div>
				<div>
					<label for="user.username" id="usernameLabel">Email Address:</label>
					<form:input path="user.username" id="username" size="50" maxlength="100" cssClass="text" cssErrorClass="text_error"/>
					<form:errors path="user.username" id="usernameErrors" cssClass="error"/>
				</div>
				<div>
					<label for="user.dateOfBirth" id="dateOfBirthLabel">Date of Birth:</label>
					<form:select path="user.dateOfBirth.dayStr" items="${days}" id="user.dateOfBirth.day"/>
					<form:select path="user.dateOfBirth.month" items="${months}" id="user.dateOfBirth.month"/>
					<form:select path="user.dateOfBirth.year" items="${years}" id="user.dateOfBirth.year"/>
					<form:errors path="user.dateOfBirth" id="dateOfBirthErrors" />
				</div>
				<div>
					<label for="user.sex" id="sexLabel">Sex:</label>
					<form:radiobutton path="user.sex" value="M" id="sexM" />Male 
					<form:radiobutton path="user.sex" value="F" id="sexF" />Female 
					<form:errors path="user.sex" id="sexErrors" />
				</div>
			</fieldset>

			<fieldset>
				<legend>Volunteer Profile</legend>
				<div>
					<label for="languageIds">Known Languages:</label>
					<form:select path="languageIds" multiple="true" items="${languages}" itemLabel="name" itemValue="id" size="5"/>
					<form:errors path="languageIds" id="languageIdsErrors" cssClass="error"/>
				</div>
				<div>
					<label for="skillIds">Skills:</label>
					<form:select path="skillIds" multiple="true" items="${skills}" itemLabel="name" itemValue="id" size="5"/>
					<form:errors path="skillIds" id="skillIdsErrors" cssClass="error"/>
				</div>
				
				<div>
					<label for="serviceCategoryIds"><span class="requiredField">Service categories of interest:</span></label>
					<form:select path="serviceCategoryIds" multiple="true" items="${serviceCategories}" itemLabel="name" itemValue="id" size="5"/>
					<form:errors path="user.serviceCategories" id="serviceCategoryIdsErrors" cssClass="error"/>
				</div>
				
				<div>
 					<label for="user.workFromHome">Happy to work:</label>
					From home:
					<form:checkbox path="user.workFromHome" id="user.workFromHome" cssClass="checkbox"/>
					On site:
					<form:checkbox path="user.workOnSite" id="user.workOnSite" cssClass="checkbox"/>
				</div>
				
				
			</fieldset>

			<fieldset>
				<legend>Availability</legend>
				
				<div>
					<label for="user.availability.sundayStart.date">Sunday:</label>
					<form:checkbox path="user.availability.availableOnSunday"/>
					Available between
					<form:select path="user.availability.sundayStart.hourStr" items="${hours}" id="user.availability.sundayStart.hourStr"/>
					:
					<form:select path="user.availability.sundayStart.minuteStr" items="${minutes}" id="user.availability.sundayStart.minuteStr"/>
					and
					<form:select path="user.availability.sundayEnd.hourStr" items="${hours}" id="user.availability.sundayEnd.hourStr"/>
					:
					<form:select path="user.availability.sundayEnd.minuteStr" items="${minutes}" id="user.availability.sundayEnd.minuteStr"/>
				</div>
				<div>
					<label for="user.availability.mondayStart.date">Monday:</label>
					<form:checkbox path="user.availability.availableOnMonday"/>
					Available between
					<form:select path="user.availability.mondayStart.hourStr" items="${hours}" id="user.availability.mondayStart.hourStr"/>
					:
					<form:select path="user.availability.mondayStart.minuteStr" items="${minutes}" id="user.availability.mondayStart.minuteStr"/>
					and
					<form:select path="user.availability.mondayEnd.hourStr" items="${hours}" id="user.availability.mondayEnd.hourStr"/>
					:
					<form:select path="user.availability.mondayEnd.minuteStr" items="${minutes}" id="user.availability.mondayEnd.minuteStr"/>
				</div>
				<div>
					<label for="user.availability.tuesdayStart.date">Tuesday:</label>
					<form:checkbox path="user.availability.availableOnTuesday"/>
					Available between
					<form:select path="user.availability.tuesdayStart.hourStr" items="${hours}" id="user.availability.tuesdayStart.hourStr"/>
					:
					<form:select path="user.availability.tuesdayStart.minuteStr" items="${minutes}" id="user.availability.tuesdayStart.minuteStr"/>
					and
					<form:select path="user.availability.tuesdayEnd.hourStr" items="${hours}" id="user.availability.tuesdayEnd.hourStr"/>
					:
					<form:select path="user.availability.tuesdayEnd.minuteStr" items="${minutes}" id="user.availability.tuesdayEnd.minuteStr"/>
				</div>
				<div>
					<label for="user.availability.wednesdayStart.date">Wednesday:</label>
					<form:checkbox path="user.availability.availableOnWednesday"/>
					Available between
					<form:select path="user.availability.wednesdayStart.hourStr" items="${hours}" id="user.availability.wednesdayStart.hourStr"/>
					:
					<form:select path="user.availability.wednesdayStart.minuteStr" items="${minutes}" id="user.availability.wednesdayStart.minuteStr"/>
					and
					<form:select path="user.availability.wednesdayEnd.hourStr" items="${hours}" id="user.availability.wednesdayEnd.hourStr"/>
					:
					<form:select path="user.availability.wednesdayEnd.minuteStr" items="${minutes}" id="user.availability.wednesdayEnd.minuteStr"/>
				</div>
				<div>
					<label for="user.availability.thursdayStart.date">Thursday:</label>
					<form:checkbox path="user.availability.availableOnThursday"/>
					Available between
					<form:select path="user.availability.thursdayStart.hourStr" items="${hours}" id="user.availability.thursdayStart.hourStr"/>
					:
					<form:select path="user.availability.thursdayStart.minuteStr" items="${minutes}" id="user.availability.thursdayStart.minuteStr"/>
					and
					<form:select path="user.availability.thursdayEnd.hourStr" items="${hours}" id="user.availability.thursdayEnd.hourStr"/>
					:
					<form:select path="user.availability.thursdayEnd.minuteStr" items="${minutes}" id="user.availability.thursdayEnd.minuteStr"/>
				</div>
				<div>
					<label for="user.availability.fridayStart.date">Friday:</label>
					<form:checkbox path="user.availability.availableOnFriday"/>
					Available between
					<form:select path="user.availability.fridayStart.hourStr" items="${hours}" id="user.availability.fridayStart.hourStr"/>
					:
					<form:select path="user.availability.fridayStart.minuteStr" items="${minutes}" id="user.availability.fridayStart.minuteStr"/>
					and
					<form:select path="user.availability.fridayEnd.hourStr" items="${hours}" id="user.availability.fridayEnd.hourStr"/>
					:
					<form:select path="user.availability.fridayEnd.minuteStr" items="${minutes}" id="user.availability.fridayEnd.minuteStr"/>
				</div>
				<div>
					<label for="user.availability.saturdayStart.date">Saturday:</label>
					<form:checkbox path="user.availability.availableOnSaturday"/>
					Available between
					<form:select path="user.availability.saturdayStart.hourStr" items="${hours}" id="user.availability.saturdayStart.hourStr"/>
					:
					<form:select path="user.availability.saturdayStart.minuteStr" items="${minutes}" id="user.availability.saturdayStart.minuteStr"/>
					and
					<form:select path="user.availability.saturdayEnd.hourStr" items="${hours}" id="user.availability.saturdayEnd.hourStr"/>
					:
					<form:select path="user.availability.saturdayEnd.minuteStr" items="${minutes}" id="user.availability.saturdayEnd.minuteStr"/>
				</div>

			</fieldset>

			
			<fieldset>
				<legend>Contact Information</legend>
				<div>
					<label for="user.contactInfo.homePhone" id="homePhoneLabel">Home Phone:</label>
					<form:input path="user.contactInfo.homePhone" id="homePhone" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.homePhone" id="homePhoneErrors" />
				</div>
				<div>
					<label for="user.contactInfo.workPhone" id="workPhoneLabel">Work Phone:</label>
					<form:input path="user.contactInfo.workPhone" id="workPhone" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.workPhone" id="workPhoneErrors"/>
				</div>
				<div>
					<label for="user.contactInfo.mobilePhone" id="mobilePhoneLabel">Mobile Phone:</label>
					<form:input path="user.contactInfo.mobilePhone" id="mobilePhone" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.mobilePhone" id="mobilePhoneErrors" />
				</div>
				<div>
					<label for="user.contactInfo.faxNumber" id="faxNumberLabel">Fax Number:</label>
					<form:input path="user.contactInfo.faxNumber" id="faxNumber" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.faxNumber" id="faxNumberErrors" />
				</div>
				<div>
					<label for="user.contactInfo.website" id="websiteLabel">Website:</label>
					<form:input path="user.contactInfo.website" id="website" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.website" id="websiteErrors" />
				</div>
			</fieldset>
			
			
			<fieldset>
				<legend>Address Information</legend>

				<div>
					<label for="user.contactInfo.address.number" id="numberLabel">House Number:</label>
					<form:input path="user.contactInfo.address.number" id="number" size="8" maxlength="8" cssClass="text"/>
					<form:errors path="user.contactInfo.address.number" id="numberErrors" />
				</div>
				<div>
					<label for="user.contactInfo.address.street" id="streetLabel">Street Address:</label>
					<form:input path="user.contactInfo.address.street" id="street" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.address.street" id="streetErrors" />
				</div>
				<div>
					<label for="user.contactInfo.address.suburb" id="suburbLabel">Suburb:</label>
					<form:input path="user.contactInfo.address.suburb" id="suburb" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.address.suburb" id="suburbErrors" />
				</div>
				<div>
					<label for="user.contactInfo.address.city" id="cityLabel">City:</label>
					<form:input path="user.contactInfo.address.city" id="city" size="50" cssClass="text"/>
					<form:errors path="user.contactInfo.address.city" id="cityErrors" />
				</div>
				<div>
					<label for="user.contactInfo.address.state" id="stateLabel">State:</label>
					<form:select path="user.contactInfo.address.state" items="${states}" id="state"/>
					<form:errors path="user.contactInfo.address.state" id="stateErrors" />
				</div>
				<div>
					<label for="user.contactInfo.address.postcode" id="postcodeLabel">Postcode:</label>
					<form:input path="user.contactInfo.address.postcode" id="postcode" size="4" maxlength="4" cssClass="text"/>
					<form:errors path="user.contactInfo.address.postcode" id="postcodeErrors" />
				</div>
				<div>
					<label for="user.contactInfo.address.country" id="countryLabel">Country:</label>
					<form:select path="user.contactInfo.address.country" items="${countries}" id="country" cssClass="text"/>
					<form:errors path="user.contactInfo.address.country" id="countryErrors"/>
				</div>
			</fieldset>
			
			<fieldset class="submit">
				<input type="submit" value="Update Profile" class="submit"/>
			</fieldset>
		
		</form:form>

	</body>
</html>
